<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Scrolling On Focus Compatibility Table</title>
  
  <!-- http://clrs.cc/ -->
  <style>
    table {
      border-collapse: collapse;
    }
    td, th {
      padding: 5px;
      border: 1px solid #aaaaaa;
    }
    tbody th {
      text-align: left;
    }
    .center {
      text-align: center;
      background: #01ff70;
    }
    .top, .left {
      text-align: center;
      background: #ff4136;
    }
    td[data-correct="no"] {
      box-shadow: inset 0 0 0px 2px #0074d9;
    }
    td[data-supported="no"][data-tabbable="yes"] {
      background: hotpink;
    }

    .center {
      text-align: center;
      background: #FFDC00;
    }
    .top, .left {
      text-align: center;
      background: #01FF70;
    }
    .bottom, .right {
      text-align: center;
      background: #FF851B;
    }

  </style>

</head>
<body>

  <h1>Focus-Scrolling Compatibility Tables</h1>

  <p>
    The data displayed in the tables of this document was gathered by running 
    <a href="../scrolling/overflow-hidden.html">scrolling/overflow-hidden.html</a>.
    The test focused an element in a scrollable container to see if and how the
    container was repositioned to show the focused element. The values <code>left</code>,
    <code>right</code>, … refer to the section of the focused element being aligned.
  </p>

  <table>
    <thead>
      <tr class="labels">
        <th colspan="2" class="meta"></th>
        <th colspan="1" data-column="chrome">Chrome</th>
        <th colspan="1" data-column="safari">Safari</th>
        <th colspan="1" data-column="firefox">Firefox</th>
        <th colspan="1" data-column="ie">Internet Explorer</th>
        <th colspan="1" data-column="notes" class="meta"></th>
      </tr>
      <tr class="versions">
        <th data-column="element" class="meta">Element</th>
        <th data-column="expected" class="meta">Expected</th>
        <th data-column="chrome-stable">40.0</th>
        <th data-column="safari-8">8.0.3</th>
        <th data-column="firefox-stable">35.0</th>
        <th data-column="ie-11">11.0</th>
        <th data-column="notes" class="meta">Notes</th>
      </tr>
    </thead>

    <tbody class="items">
      <tr>
        <th colspan="7" class="block-header">Vertical in <code>overflow</code> block</th>
      </tr>
      <tr data-column="vertical-more-space">
        <th>more than required space</th>
        <td class="bottom">bottom</td>
        <td data-column="chrome" class="center">center</td>
        <td data-column="safari" class="center">center</td>
        <td data-column="firefox" class="bottom">bottom</td>
        <td data-column="ie" class="bottom">bottom</td>
        <td data-column="notes"><code>top</code> when tabbing backwards</td>
      </tr>
      <tr data-column="vertical-exact-space">
        <th>required space</th>
        <td class="top">top</td>
        <td data-column="chrome" class="center">center</td>
        <td data-column="safari" class="center">center</td>
        <td data-column="firefox" class="top">top</td>
        <td data-column="ie" class="top">top</td>
        <td data-column="notes"></td>
      </tr>
      <tr data-column="vertical-less-space">
        <th>less than required space</th>
        <td class="top">top</td>
        <td data-column="chrome" class="center">center</td>
        <td data-column="safari" class="center">center</td>
        <td data-column="firefox" class="top">top</td>
        <td data-column="ie" class="top">top</td>
        <td data-column="notes"></td>
      </tr>
    </tbody>

    <tbody class="items">
      <tr>
        <th colspan="7" class="block-header">Horizontal in <code>overflow</code> block</th>
      </tr>
      <tr data-column="horizontal-more-space">
        <th>more than required space</th>
        <td class="right">right</td>
        <td data-column="chrome" class="center">center, partial</td>
        <td data-column="safari" class="center">center, partial</td>
        <td data-column="firefox" class="right">right, partial</td>
        <td data-column="ie" class="right">right</td>
        <td data-column="notes">Gecko, Blink and WebKit won't scroll the container horizontally if the focused element is partially visible</td>
      </tr>
      <tr data-column="horizontal-exact-space">
        <th>required space</th>
        <td class="left">left</td>
        <td data-column="chrome" class="center">center</td>
        <td data-column="safari" class="center">center</td>
        <td data-column="firefox" class="left">left</td>
        <td data-column="ie" class="left">left</td>
        <td data-column="notes"></td>
      </tr>
      <tr data-column="horizontal-less-space">
        <th>less than required space</th>
        <td class="left">left</td>
        <td data-column="chrome" class="center">center</td>
        <td data-column="safari" class="center">center</td>
        <td data-column="firefox" class="left">left</td>
        <td data-column="ie" class="left">left</td>
        <td data-column="notes"></td>
      </tr>
    </tbody>
  </table>

</body>
</html>
